@import "variables";

.table-map-div-wrapper {
    background-image:linear-gradient(#434343, #282828);
    width: 100%;
    border: 2px solid #333;
}

.table-map-controls {
    margin-bottom: 5px;
}

.table-map-container {

    .table-group rect {
        cursor: pointer;
        fill: #b4ffad;
        stroke: green;
        stroke-width: 3;
    }

    .table-group .seated {
        color: red;
        stroke: red;
        fill: #ff8e8e;
    }

    .table-label-group {
        font-weight: bold;
    }

    .table-label-group text {
        pointer-events: none;
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
           -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* Internet Explorer/Edge */
                user-select: none;
    }
}

.edit-map {
    background-color: transparent;
    background-image: linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent);
    background-size: 40px 40px;

    .table-group rect, .table-group .seated {
        cursor: move;
        fill: white;
        stroke: black;
    }
}

